<template>
  <el-row>
      <div class="topSearch">
        <el-button
          type="primary"
          size="small"
          @click="addItem"
          v-if="showAdd"
          >添加</el-button
        >
         <div class="tabs" id="initiate" v-if="showInitiate" >
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">

            <el-tab-pane v-for="(iItem,iI) in initiate" :label="iItem.label" :name="iItem.name"/>
            <!-- <el-tab-pane label="全部" name="qb" />
            <el-tab-pane label="待审核" name="spz" />
            <el-tab-pane label="已通过" name="ty" />
            <el-tab-pane label="已驳回" name="bty" />
            <el-tab-pane label="未提交" name="wcl" v-if="showLastItem"/> -->
          </el-tabs>
        </div>
        <el-form ref="searchform" :model="form" size="small">
            <el-col :span="12">
            <el-form-item prop="keyWord">
              <el-input
                :placeholder="placeholder"
                clearable
                v-model="form.keyWord"
                style="width:100%"
              >
              </el-input>
            </el-form-item>
    
            </el-col>
            <div class="rightbtn">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="searchlist"
                class="marginL"
                >查询
              </el-button>
              <el-button
                icon="el-icon-refresh-left"
                size="small"
                @click="resetform"
                >重置</el-button
              >
              <div class="clear"></div>
            </div>
    
        </el-form>
        <div style="clear: both"></div>
      </div>
    </el-row>
</template>

<script>
export default {
  data() {
    return {
      activeName:'qb',
    };
  },
  props: {
   showAdd:{
     type:Boolean,
     default:true,
   },
   showInitiate:{
     type:Boolean,
     default:false,
   },
   initiate:{
     type:Array,
     default:()=>{
       return [{label:'全部',name:'qb'},{label:'待审核',name:'spz'},{label:'已通过',name:'ty'},{label:'已驳回',name:'bty'},{label:'未提交',name:'wcl'},]
     },
   },

   placeholder:{
     type:String,
     default:'请输入关键字',
   },
   form:{
     type:Object,
     default:()=>{
       return {}
     }
   },
  },
  methods: {
    //新增
    addItem() {
      this.$emit("addItem");
    },
    //搜索
    searchlist() {
      this.$emit("searchlist");
    },
    //搜索
    handleClick(tab,event) {
      this.$emit("handleClick",tab);
    },
    //重置
    resetform() {
        this.$refs["searchform"].resetFields();
      this.$emit("resetform");
    },

    
  },
};
</script>

<style scoped lang='scss'>
.topSearch {
  
  .el-button {
    float: left;
  }
  #initiate {
    float: left;
  }
  .el-form {
    float: right;
     overflow:hidden
  }
    .rightbtn{
    float: right;
    overflow:hidden
  }
  .el-form-item{
    margin-bottom: 0;
  }
}

</style>
